<template>
  <div class="setting">
    <el-tabs tabPosition="left" class="tabs" v-model="tabs" >

      <!-- ─────────────────────────────────────────── 云端 ─────────────────────────────────────────── -->
      <el-tab-pane><span slot="label"><i class="iconfont icon-login1"></i> 登陆</span>
        <login @toTabs="toTabs($event)" @loginCallback="loginCallback($event)"></login>
      </el-tab-pane>

      <!-- ─────────────────────────────────────────── 云端 ─────────────────────────────────────────── -->
      <el-tab-pane ><span slot="label"><i class="iconfont icon-cloud2"></i> 云端设置</span>
        <cloud ref="cloud"></cloud>
      </el-tab-pane>

      <!-- ─────────────────────────────────────────── 截图 ─────────────────────────────────────────── -->
      <el-tab-pane><span slot="label"><i class="iconfont icon-capture14"></i> 其他设置</span>
        <screenshot ref="ss" @refresh="refresh($event)"></screenshot>
      </el-tab-pane>


      <!-- ─────────────────────────────────────────── 帮助 ─────────────────────────────────────────── -->
      <el-tab-pane><span ref="tabsd" slot="label"><i class="el-icon-question"></i> 帮助</span>
        <help></help>
      </el-tab-pane>

      <!-- ─────────────────────────────────────────── 关于 ─────────────────────────────────────────── -->
      <el-tab-pane><span slot="label"><i class="el-icon-info"></i> 关于</span>
        <aboutUs ref="aboutUs"></aboutUs>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import login from './login'
import cloud from "./cloud"
import screenshot from "./screenshot"
import help from "./help"
import aboutUs from "./aboutUs"

export default {
  name: 'setting',
  data () {
    return {
      tabs: ''
    }
  },
  computed: {
    theme () {return this.$store.state.config.theme.type}
  },
  watch : {
    theme () {
      this.test()
    }
  },
  methods : {
    submit () {
      console.log(this.tabs)
    },
    toTabs (value) {
      this.tabs = value
    },
    refresh () {
      this.$emit('refresh', null)
    },
    init () {
      this.$refs.ss.init()
    },
    test () {
      setTimeout(()=> {
        let ele = this.$refs.tabsd.parentElement
        if (this.theme === 'light') {
          ele.style.borderTop = '2px solid rgba(228, 231, 237,1)'
        } else if (this.theme === 'night') {
          ele.style.borderTop = '2px solid rgba(162, 126, 42, 0.1)'
        }
        ele.style.marginTop = '10px'
        ele.style.paddingTop = '10px'
        ele.style.marginBottom = '10px'
      },100)
    },
    loginCallback(){
      this.$emit('loginCallback')
    }
  },
  mounted: function () {
    this.init()
    this.test()
  },
  components: {
    login, cloud, screenshot, help, aboutUs
  }
}
</script>

<style scoped lang="scss">
  .setting {
    height: 480px;
    .tabs {
      height: 100%;
      /deep/ .el-tabs__item {
        [data-theme="light"] & {color: #858585;}
        [data-theme="night"] & {color: $theme-color-night-dark-3;}
      }
      /deep/ .el-tabs__item.is-active{
        [data-theme="light"] & {color: $theme-color-light;}
        [data-theme="night"] & {color: $theme-color-night;}
        font-weight: bold;
      }
      /deep/ .el-tabs__item:hover{
        [data-theme="light"] & {color: $theme-color-light;}
        [data-theme="night"] & {color: $theme-color-night-7;}
      }
      /deep/ .el-tabs__active-bar {
        [data-theme="light"] & {background-color: $theme-color-light;}
        [data-theme="night"] & {background-color: $theme-color-night;}
      }
      /deep/ .el-tabs__nav-wrap::after {
        [data-theme="light"] & {background-color: rgba(228, 231, 237, 0.89);}
        [data-theme="night"] & {background-color: $theme-color-night-dark-1;}
      }
    }
  }

</style>